import { Component, OnInit } from '@angular/core';
import {Hero} from '../hero'
// import { HEROES } from '../mock-heroes';
import {HeroService} from '../hero.service'
@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
      // hero : Hero={
      //   id:1,
      //   name:'Windstorm',
      // }
      // heroes = HEROES;
      heroes:Hero[];
      // selectedHero:Hero;
     
      constructor(private heroService :HeroService) { }

      ngOnInit() {
        this.getHeroes()
      }
      getHeroes():void{
        // this.heroes = this.heroService.getHeroes()
        this.heroService.getHeroes()
        .subscribe(heroes=>this.heroes = heroes)
      }
      // onSelect(hero:Hero):void{
      //   this.selectedHero = hero
      // }
      add(name:string):void{
        name=name.trim()
        if(!name){
          return
        }
        this.heroService.addHero({name} as Hero)
        .subscribe(hero=>
          {
            console.log(hero)
          this.heroes.push(hero)
          })
      }
      delete(hero:Hero):void{
        console.log(hero)
        this.heroes = this.heroes.filter(h=>h!==hero)
        this.heroService.deleteHero(hero).subscribe()
      }

}
